<!--4s回厂明细-->
<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="2">
				<p class="labelText">公司名称:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="queryData.fSCompanyId" placeholder="选择4s店名称">
					<el-option v-for="item in fSCompanyList" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-col>
			
			<el-col :span="2">
				<p class="labelText">起始日期:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker v-model="queryData.startDate" size="small" type="date" :clearable="true" style="width:90%;" placeholder="回厂开始日期">
				</el-date-picker>
			</el-col>
			<el-col :span="2">
				<p class="labelText">截止日期:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker v-model="queryData.stopDate" size="small"  :clearable="true" style="width:90%;" type="date" placeholder="回厂结束日期">
				</el-date-picker>
			</el-col>
			
				<el-col :span="2" style="text-align: right">
				<el-button type="primary" size="small" v-on:click="query">查 询</el-button> 
			</el-col>
		</el-row>
		
		<el-row>
				<el-col>
					<el-table :data="tableData.dataList" @row-dblclick="dbClick" stripe border>
						<el-table-column prop="plateNum" label="车牌号" width="180">
						</el-table-column>
	          			<el-table-column prop="vin" label="VIN" width="200">
						</el-table-column>
						<el-table-column prop="orderNum" label="工单号" width="200">
						</el-table-column>
	          			<el-table-column label="回厂时间" width="200" :formatter="backDatesCom">
						</el-table-column>
						<el-table-column label="归属公司" width="250" :formatter="companyCom">
						</el-table-column>
						
					</el-table>
					<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total,prev, pager, next" :total="tableData.total">
					</el-pagination>
				</el-col>
			</el-row>
	</div>
</template>

<script>
	export default {
		data:function(){
			return{
				tableData:{
			      	dataList:[],
			      	total:0
			      },
			    queryData:{
			    	fSCompanyId:'',
			    	startDate:'',
			    	stopDate:'',
				},
				fSCompanyList:[],//4s店公司下拉列表
			}
		},
		methods:{
			
			//列表，分页大小切换
		    handleSizeChange: function() {},
		    //列表,当前页切换
		    handleCurrentChange: function(currentPage) {
		      this.$data.CurentPage = currentPage;
		    },
		    //查询
		    query:function(){
		    	
		    	if(this.$data.queryData.startDate) {
					this.$data.queryData.startDate = this.moment(this.$data.queryData.startDate).format("YYYY-MM-DD");
				}
				if(this.$data.queryData.stopDate) {
					this.$data.queryData.stopDate = this.moment(this.$data.queryData.stopDate).format("YYYY-MM-DD");
				}
		    	
		    	this.$http({
		        method: "POST",
		        url: this.API_ROOT + "/crm/link/back/page",
		        body: this.$data.queryData
		      }).then(
		        function(resp) {
		          if(resp.data.success){
		          	this.$data.tableData = resp.data;
		          	this.$data.tableData.total = Number(resp.data.total);
		          	this.$message(resp.data.msg);
		          }
		          else{
		          	this.$message.error(resp.data.msg);
		          }
		        },
		        function(error) {
		          // error
		        }
		      );
		    },
		    
		    fSCompanyListCom:function(){
		    	this.$http({
		    		method:"GET",
		    		url:this.API_ROOT + "/crm/link/back/companyList",
		    	}).then(function(resp){
		    		if(resp.data.success){
		    			this.$data.fSCompanyList = resp.data.dataList;
		    		}
		    	},function(error){});
		    },
		    
		    companyCom:function(row){
		    	if(row.companyId != null && row.companyId != ""){
		    		for(var i=0;i<this.$data.fSCompanyList.length;i++){
		    			if(this.$data.fSCompanyList[i].value == row.companyId){
		    				return this.$data.fSCompanyList[i].label;
		    			}
		    		}
		    	}
		    	return"";
		    	
		    },
		    
		    backDatesCom: function(row, column) {
		      if (row.backTime == "" || row.backTime == null) return "";
		      return this.moment(Number(row.backTime)).format("YYYY-MM-DD");
		    },
		    
		},
		created:function(){
			this.fSCompanyListCom();
		}
	}
</script>

<style>
</style>